/**
 * @description  : 多选组件
 * @descriptionDetail : 多选组件
 * @copyright    : 浙江烟草
 * @author       : mc
 * @create       : 2022-10-03 17:23:42
 */
<template>
  <view class="multi-page">
    <theme-navbar
      :isBack="leftBtnOpt.isBack"
      :backText="leftBtnOpt.backText"
      :customBack="customBack"
      :backIconName="leftBtnOpt.backIconName"
      :is-white="false"
      :title="title"
    >
      <view class="nav-right-icon" @click="handlerConfirm">
        确定
      </view>
    </theme-navbar>
    <view class="content">
      <view
        class="credit-container"
        v-for="(item, idx) in options"
        :key="idx"
        @tap="handlerSelectItem(item)"
      >
        <view class="ctm">
          <view class="main-title">
            {{ item.name }}
          </view>
          <template v-if="hasExts">
            <view class="ext-title" v-for="(ipx, idp) in extNum(item)" :key="'ext' + ipx">
              <text style="flex:1;">
                {{ getExt1Content(item.exts, idp * 2) }}
              </text>
              <view style="flex: .2;"></view>
              <text style="flex:1;">
                {{ getExt2Content(item.exts, idp * 2 + 1) }}
              </text>
            </view>
          </template>
        </view>
        <view class="tapCls">
          <u-icon
            name="checkbox-mark"
            color="#2979ff"
            size="32"
            v-if="selectedUids.includes(item.uid)"
          ></u-icon>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: "MSelect",
  props: {
    isSingle:{
      type: Boolean,
      default: false,
    },
    /** 
     * {uid: 唯一键, name: 名称, exts: [{'key':'', 'value':''}], obj:{}}
     */
    options: {
      type: Array,
      default: () => [],
    },
    defaultUids: {   // 已选中的uid
      type: Array,
      default: () => [],
    },
    title: {
      type: String,
      default: '请选择',
    },
    /**
	 * leftBtnOpt.isBack  是否有返回按钮
	 * leftBtnOpt.backText  返回名字
	 * leftBtnOpt.backFun  返回自定义逻辑
	 */
    leftBtnOpt: {
      type: Object,
      default: () => {
        return {
          isBack:false,
          backText:"",
          backIconName:"",
          backFun:() => {},
        };
      },
    },
    hasExts:{ // 默认true
      type: Boolean,
      default:true,
    },
  },
  data() {
    return {
      selectedUids: [],     // 选中项的ids
      selectedItems: [],     // 选中项
    };
  },
  created() {
    console.log("初始化", this.defaultUids);
    if (this.defaultUids && this.defaultUids.length > 0) {
      this.selectedUids = this.defaultUids;
      this.options.forEach(o => this.selectedUids.includes(o.uid) && this.selectedItems.push(o));
    }
  },
  methods: {
    extNum(item){
      if(!this.hasExts) return 0;
      if(item.exts.length % 2 == 0){
        return item.exts.length / 2;
      }else{
        return Number(Number((item.exts.length / 2) + 1).toFixed(0));
      }
    },
    getExt1Content(ext, ipx){
      console.log(ipx);
      return `${ext[ipx].key}: ${ext[ipx].value}`;
    },
    getExt2Content(ext, ipx){
      if(ext.length <= ipx) return '';
      return `${ext[ipx].key}: ${ext[ipx].value}`;
    },
    // 选中
    handlerSelectItem(item) {
      if(this.isSingle){
        this.selectedItems = [item,];
        this.selectedUids = [item.uid,];
      }else{
        if (this.selectedUids.includes(item.uid)) {
          this.selectedItems = this.selectedItems.filter(it => it.uid != item.uid);
        } else {
          this.selectedItems.push(item);
        }
        this.selectedUids = [];
        this.selectedItems.forEach(it => this.selectedUids.push(it.uid));
      }
    },
    customBack(){
      this.leftBtnOpt.backFun(this.selectedItems);
    },
    // 确认
    handlerConfirm() {
      this.$emit("select", this.selectedItems);
    },
  },
};
</script>
<style lang="scss" scoped>
.multi-page {
  padding: 10px;
  .nav-right-icon {
    color: #FFF;
    margin-right: 15px;
  }
  .u-checkbox-group {
    width: 100%;
  }
  .credit-container {
    padding: 15px 0;
    display: flex;
    flex-direction: row;
    align-items: center;
    width: 100%;
    border-bottom: 1px solid #e6e6e6;
  }
  .title {
    text-overflow: ellipsis;
    word-break: break-all;
    overflow: hidden;
    white-space: nowrap;
  }
  .tapCls{
    display: flex;
    flex-direction: row;
    align-items: center;
    flex-shrink: 0;
  }
  .ctm{
    flex: 1;
    display: flex;
    flex-direction: column;
  }
  .main-title{
    font-size: 26rpx;
  }
  .ext-title{
    font-size: 20rpx;
    display: inline-flex;
    align-items: center;
  }
}
</style>